<template>
  <div>
    <div style="display: flex; align-items: center; position: sticky; top: 0">
      
      <van-icon name="arrow-left" @click="onClickLeft" />
     
      <van-search show-action v-focus v-model="value" placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel"
        @input="onSearch">
        <template #action>
          <div @click="onCancel">取消</div>
        </template>
      </van-search>
    </div>
    <router-view v-if="value !== ''"></router-view>
    <div v-show="value == ''" class="search">最近热搜</div>
    <div v-show="value == ''" class="select" v-for="item in this.word" :key="item" @click="Onclick($event)" :id="item">
      {{ item }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      word: ['🔥小熊饼干', '🔥甜甜圈', '🔥蛋黄酥', '草莓千层', '全麦面包', '曲奇饼干', '广式月饼']
    };
  },
  methods: {
    onClickLeft() {
      //this.$router.push(`/select`);
      this.$router.go(-1)
      this.value = ""
    },
    onSearch(val) {
      console.log(`/select/recipe/?food=${val}`, "传递到下一个页面"); //select/recipe/?food=面包
      this.$router.push({ path: `/select/recipe?food=${val}` });
    },
    onCancel() {
      this.$router.go(-1);
    },
    // 热词点击事件
    Onclick(e) {
      // 截取字符串，去掉小火苗.slice()
      let id = e.currentTarget.id
      if (id.indexOf("🔥") !== -1) {
        var n = id.slice("2");
        this.value = n
        this.$router.push({ path: `/select/recipe?food=${n}` });
      } else {
        this.value = id
        this.$router.push({ path: `/select/recipe?food=${id}` });
      }
    },
  },
  //   自定义指令，让输入框获得焦点
  directives: {
    focus: {
      inserted: function (el) {
        el.querySelector("input").focus();
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.search {
  margin: 20px 20px 10px 20px;
  line-height: 20px;
  color: #999999;
  font-weight: bold;
}

.select {
  padding: 0px 10px 0px 5px;
  color: #4a4945;
  border-radius: 100px;
  margin: 5px 5px 0px 10px;
  background-color: #f5f7f9;
  line-height: 30px;
  display: inline-block;
}

i {
  margin: 10px;
}

.van-search {
  width: 1000px;
}
</style>
